<template>
  <div class="parent" style="position: relative">
    <px-select
      v-model="selectchart"
      size="small"
      placeholder="请选择"
      clearable
      style="position: absolute; top: -33px; right: -1px; width: 116px"
      filterable
      @change="timechange"
    >
      <px-option v-for="dict in oldchartsList" :key="dict.title" :label="dict.title" :value="dict.title" />
    </px-select>
    <echartsDom v-if="isShowEcharts" style="width: 100%; height: 100%" :width="width" :height="height" :option="option" :type="type" />
    <div v-else>
      <px-empty :image-size="50" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, ref } from "vue";
import echartsDom from "./echartsDom.vue";
import { queryConsumeChartForDay } from "@/api/waterKanban";
const props = defineProps({
  width: {
    type: String,
    default: ""
  },
  height: {
    type: String,
    default: ""
  },
  color: {
    type: String,
    default: "#3B82F6"
  },
  type: {
    type: String,
    default: ""
  }
});
const isShowEcharts = ref(false);
const state = reactive({
  option: {},
  chartsList: [],
  oldchartsList: [],
  selectchart: "",
  charsData: {}
});
const { option, chartsList, selectchart, oldchartsList, charsData } = toRefs(state);
const timechange = (val: any) => {
  console.log(val);
  if (val == "") {
    chartsList.value = oldchartsList.value;
    getoptions2();
  } else {
    chartsList.value = oldchartsList.value;
    const filterlist = chartsList.value.filter((item: any) => item.title == val);
    chartsList.value = filterlist;
    console.log(chartsList.value);
    getoptions2();
  }
};
const getoptions2 = () => {
  const series = chartsList.value.map(item => {
    return {
      data: item.details.map(item => (item.value != null ? item.value : 0)),
      type: "bar",
      name: item.title,
      label: {
        show: false,
        color: props.type == "dark" ? "white" : "black"
      },
      emphasis: {
        focus: "series"
      }
    };
  });
  option.value = {
    backgroundColor: props.type == "dark" ? "#001e3b" : "",
    grid: {
      left: "10px",
      top: "35px",
      right: "0px",
      bottom: "10px",
      containLabel: true
    },
    legend: {
      x: "right",
      type: "scroll",
      width: "65%"
    },
    tooltip: {
      confine: true,
      trigger: "axis"
    },
    xAxis: {
      type: "category",
      boundarGap: false,
      data: charsData.value.xaxis
    },
    yAxis: {
      name: "单位（t）",
      type: "value",
      nameTextStyle: {
        padding: [0, 0, 0, 50]
      }
    },
    series: series
  };
};
const getoptions = () => {
  queryConsumeChartForDay({ dictKey: "UPW02", day: 7 }).then((response: any) => {
    console.log(response);
    isShowEcharts.value = true;
    charsData.value = response;
    chartsList.value = response.panelList;
    oldchartsList.value = response.panelList;
    getoptions2();
  });
};
getoptions();
</script>

<style scoped lang="scss">
.parent {
  width: 100%;
  height: 100%;
}
</style>
